<template>
  <div class="my">
    <div class="title">
      <span>我的</span>
    </div>
    <div class="owen">
      <dl @click="tomydetail(msg)">
        <dt><img :src="msg.img" alt="" /></dt>
        <dd>
          <span>{{ msg.name }}</span>
          <span>{{ msg.tel }}</span>
        </dd>
        <div class="div">
          <img src="../../../assets/右箭头.png" alt="" />
        </div>
      </dl>
    </div>
    <div class="divs">
      <p>我的服务</p>
      <div class="box">
        <div>
          <i class="iconfont icon-duibifenxi"></i>
          <span>我的对比</span>
        </div>
        <div>
          <i class="iconfont icon-lianxiwomen"></i>
          <span>联系我们</span>
        </div>
        <div>
          <i class="iconfont icon-drxx66"></i>
          <span>意见反馈</span>
        </div>
        <div @click="showShare = true">
          <i class="iconfont icon-fenxiang"></i>
          <span>分享好友</span>
        </div>
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
            @select="onSelect"
        />
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/font/iconfont.css";
import { getrankPage } from "@/api/index";
import { Toast } from "vant";
export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
        ],
      ],
      mylist: [],
      msg: {
        img:
          "https://static.veer.com/veer/static/resources/Titles/2020-11-06/f411f48a0e1a43af92125e4696b1da40.gif",
        name: "三组学习人",
        tel: "15362365234",
      },
    };
  },
  methods: {
    async getmylist() {
      let res = await getrankPage({
        mid: 0,
      });
      console.log(res.dataList);
      this.mylist = res.dataList;
    },
    tomydetail(msg) {
      let newMsg = JSON.stringify(msg);
      this.$router.push({
        path: "/MyDetail",
        query: {
          newMsg,
        },
      });
    },
    onSelect(option) {
      Toast(option.name);
      console.log("11111");
      this.showShare = false;
    },
  },
  mounted() {
    this.getmylist();
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 2px solid #eee;
  span {
    font-weight: 800;
  }
}
.owen {
  border-bottom: 2px solid #eee;
  height: 6rem;
  dl {
    display: flex;
    flex-direction: row;
    dt {
      margin: 10px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    dd {
      margin: 10px;
      display: flex;
      flex-direction: column;
      text-align: left;
      flex: 1;
      span {
        font-size: 18px;
        margin: 5px 0;
      }
    }
    .div {
      padding-right: 40px;
      margin: 30px 0;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
.divs {
  border: 1px solid #eee;
  border-radius: 0.5rem;
  margin: 1rem;
  p {
    width: 100%;
    font-weight: 800;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding-left: 20px;
    border-bottom: 0.09rem solid #eee;
  }
  .box {
    display: flex;
    align-items: center;
    height: 5rem;
    justify-content: space-around;
    font-size: 0.9rem;
    i {
      font-size: 2rem;
      display: block;
      margin: 0.1rem 0;
    }

  }
}
</style>